<template>
  <div class="main">
    <div class="title">
      <div class="blue"></div>
      <div class="name">设备在线情况</div>
      <!-- 新增颜色标识 -->
      <div class="legend">
        <div class="legend-item">
          <div class="color online"></div>
          <span>在线</span>
        </div>
        <div class="legend-item">
          <div class="color offline"></div>
          <span>离线</span>
        </div>
      </div>
    </div>
    <div class="charts-container">
      <div ref="chart1" class="chart"></div>
      <div ref="chart2" class="chart"></div>
    </div>
    <div class="state">
      <RoseDiagram />  <!-- 使用组件 -->
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import RoseDiagram from '@/components/visualization/rosediagram.vue';  // 添加导入语句

export default {
  components: {  // 注册组件
    RoseDiagram
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const initChart = (dom, title, data, prefix) => {  // 添加prefix参数
        const chart = echarts.init(dom);
        const option = {
          title: {
            text: title,
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [{
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                color: '#fff',
                formatter: `${prefix}{b}`  // 使用模板字符串动态设置前缀
              }
            },
            data: data,
            itemStyle: {
              borderRadius: 5,
              borderColor: '#0d2b55',
              borderWidth: 2
            }
          }]
        };
        chart.setOption(option);
        return chart;
      };

      this.chart1 = initChart(this.$refs.chart1, '', [  // 添加前缀参数
        { value: 50, name: '在线', itemStyle: { color: '#37a2da' } },
        { value: 50, name: '离线', itemStyle: { color: '#ffd85c' } }
      ], 'DTO');  // 添加第四个参数

      this.chart2 = initChart(this.$refs.chart2, '', [
        { value: 60, name: '在线', itemStyle: { color: '#37a2da' } },
        { value: 40, name: '离线', itemStyle: { color: '#ffd85c' } }
      ], 'PLC');  // 添加第四个参数
    }
  }
};
</script>

<style scoped>
.main {
  height: 70vh;
  width: 25%;
  background-color: #0d2b55;
  margin-top: 5px;
  margin-left: 10px;
  cursor: pointer;
}

.main .title {
  height: 11%;
  width: 100%;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue {
  background-color: #2997e4;
  width: 1%;
  height: 25px;
}

.name {
  flex: 1;
  font-size: 17px;
  color: white;
}

.charts-container {
  display: flex;
  height: 30%;  /* 原高度50%调整为89% */
  padding-top: 30px;
}

.chart {
  width: 50%;
  height: 100%;  /* 原高度50%调整为100% */
  transform: translateY(-30px);  /* 最终上移100px（20px+80px） */
}

.title {
  position: relative; /* 新增定位 */
}

.legend {
  position: absolute;
  /* left: 20px; */
  top:70px;
  display: flex;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.online {
  background-color: #37a2da;
}

.offline {
  background-color: #ffd85c;
}

.legend span {
  color: white;
  font-size: 14px;
}
.state {
  height: 60%;
  width: 100%;
/* background-color: #ffd85c; */
}
</style>
